<template>
  <div class="app-container" >
    <h3 align="center">个人信息</h3>
    <el-row :gutter="18" type="flex" >
      <el-col :span="9" :offset="8">
      <div style = "padding-top: 10px;" >
        <el-form ref="form" :model="form" label-width="80px" >
          
            <el-form-item label="ID">
              <el-input v-model="form.id" style="width: 80%;" :disabled="true"></el-input>
            </el-form-item>

            <el-form-item label="用户名">
              <el-input v-model="form.username" style="width: 80%;"></el-input>
            </el-form-item>
            <el-form-item label="性别">
              <el-input v-model="form.sex" style="width: 80%;"></el-input>
            </el-form-item>

            <el-form-item label="昵称">
              <el-input v-model="form.nickname" style="width: 80%;"></el-input>
            </el-form-item>
            <el-form-item label="电话">
              <el-input  v-model="form.telephone" :autosize="{ minRows: 8, maxRows: 14}" style="width: 80%;"></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input  v-model="form.email" style="width: 80%;"></el-input>
            </el-form-item>
            
        </el-form>
      </div>
      </el-col>
    </el-row>
    <el-row>
      <div align="center">
        <el-button type="primary" @click="onSubmit()" >确认修改</el-button>
      </div>
    </el-row>
    <el-row>
      <div align="center">
        <el-button type="text" @click="dialogFormVisible = true" >修改密码</el-button>
      </div>
    </el-row>

    <el-dialog :visible.sync="dialogFormVisible">
        <el-form ref="form"   >
            <el-form-item label="请输入旧密码">
                <el-input v-model="oldpassword" show-password type="password"></el-input>
            </el-form-item>
            <el-form-item label="请输入新密码">
                <el-input v-model="newpassword1" show-password type="password"></el-input>
            </el-form-item>
            <el-form-item label="请输入新密码">
                <el-input v-model="newpassword2" show-password type="password"></el-input>
            </el-form-item> 
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="changePassword()">修 改</el-button>
        </div>

    </el-dialog>
    

</div>
</template>
<script>
  import global from '../../Global'

  export default {
    data() {
      return {
        form: {
          id:'',
          username: '',
          sex: '',
          nickname:'',
          telephone:'',
          email:'',
          password:''
        },
        oldpassword:'',
        newpassword1:'',
        newpassword2:'',
        listLoading: false,//数据加载等待动画
        dialogFormVisible: false,//增加按钮弹窗能不能看到
        adminName: '管理员' ,
        title: '项目立项'
      }
    },
    created() {
        this.getUserInfo();
        
    },
    methods: {
        getUserInfo(){
          this.api({
          url: "/user/getUserInfo",
          method: "post",
          data: {
              roleId:global.obj.userId
          }
        }).then((data) => {
            this.form = data.list[0];
        })

        },
      onSubmit() {
        this.api({
          url: "/user/changeUserInfo",
          method: "post",
          data: this.form
        }).then(() => {
          let msg = "提交成功,信息已修改";
          this.$message({
            message: msg,
            type: 'success',
            duration: 1 * 1000
          })
          this.getUserInfo();
        })
      },
      changePassword(){
          if(this.oldpassword === this.form.password
          &&this.newpassword1===this.newpassword2){
              this.onSubmit();
          }else{
            let msg = "输入信息有误";
            this.$message({
                message: msg,
                type: 'warning',
                duration: 1 * 1000
            })
            this.getUserInfo();
          }
      }
    }
  }
</script>


<style scoped>
  .requiredPerm {
    color: #ff0e13;
  }
</style>
